//获取数据
async function getInfo() {
  const res = await axios.get("/dashboard");
  console.log(res);
  const { groupData, overview, provinceData, salaryData, year } = res.data;
  getOverview(overview);
  renderYear(year);
  renderSalaryDate(salaryData);
  renderMap(provinceData);
  renderBgsalary(salaryData);
  renderGroupData(groupData);
  console.log(provinceData);
}
getInfo();

//渲染概览
function getOverview(overview) {
  for (const k in overview) {
    document.querySelector(`[name="${k}"]`).innerHTML = overview[k];
  }
}

//渲染薪资
function renderYear(year) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("line"));

  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: "15%",
      left: "15%",
    },
    title: {
      top: "2%",
      left: "3%",
      text: "2021全学科薪资走势",
      textStyle: {
        fontSize: 20,
        color: "red",
        fontFamily: "宋体",
        textShadowColor: "transparent",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "pink",
        },
      },
    },
    xAxis: {
      type: "category",
      data: year.map((item) => item.month),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: year.map((item) => item.salary),
        type: "line",
        smooth: true,
        symbolSize: 10,
        lineStyle: {
          width: 6,
          color: "#58afff",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(81, 172, 255,0.7)",
            },
            {
              offset: 0.8,
              color: "rgba(81, 172, 255,0)",
            },
          ]),
        },
      },
    ],
    itemStyle: {
      color: "#58afff",
      borderColor: "#58afff",
    },
    color: ["#58afff"],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
//渲染薪资分布
function renderSalaryDate(salaryData) {
  var chartDom = document.getElementById("salary");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "班级薪资分布",
      top: "3%",
      left: "3%",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "90%",
      left: "center",
    },
    series: [
      {
        name: "班级薪资分布",
        type: "pie",
        radius: ["45%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 3,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: salaryData.map((item) => {
          return {
            value: item.g_count + item.b_count,
            name: item.label,
          };
        }),
      },
    ],
    color: ["#34d39a", "#3fceff", "#5097ff", "#fda224"],
  };

  option && myChart.setOption(option);
}

//渲染地图
function renderMap(provinceData) {
  // console.log(provinceData);
  const myEchart = echarts.init(document.querySelector("#map"));
  const dataList = [
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 0 },
    { name: "天津", value: 0 },
    { name: "上海", value: 0 },
    { name: "重庆", value: 0 },
    { name: "河北", value: 0 },
    { name: "河南", value: 0 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 0 },
    { name: "黑龙江", value: 0 },
    { name: "湖南", value: 0 },
    { name: "安徽", value: 0 },
    { name: "山东", value: 0 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 0 },
    { name: "浙江", value: 0 },
    { name: "江西", value: 0 },
    { name: "湖北", value: 0 },
    { name: "广西", value: 0 },
    { name: "甘肃", value: 0 },
    { name: "山西", value: 0 },
    { name: "内蒙古", value: 0 },
    { name: "陕西", value: 0 },
    { name: "吉林", value: 0 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 0 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 0 },
    { name: "宁夏", value: 0 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ];
  //处理数据
  // dataList.map((item) => {
  //   provinceData.find((v) => {

  //   });
  // });
 const res =  provinceData.sort((a, b) => {
    return a.value - b.value;
  });
  dataList.forEach((item, i) => {
    provinceData.find((item1, j) => {
      if (item1.name.indexOf(item.name) === 0) {
        item.value = item1.value;
      }
    });
  });
  let option = {
    title: {
      text: "籍贯分布",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} 位学员",
      borderColor: "transparent",
      backgroundColor: "rgba(0,0,0,0.5)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: res[provinceData.length-1].value,
      left: "left",
      bottom: "20",
      text: [`${res[provinceData.length-1].value}`, "0"],
      inRange: {
        color: ["#ffffff", "#0075F0"],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: "china",
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: "10",
          color: "rgba(0,0,0,0.7)",
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(0, 0, 0, 0.2)",
          color: "#e0ffff",
        },
        emphasis: {
          areaColor: "#34D39A",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
    series: [
      {
        name: "籍贯分布",
        type: "map",
        geoIndex: 0,
        data: dataList,
      },
    ],
  };
  myEchart.setOption(option);
}

//渲染男女薪资分布
function renderBgsalary(salaryData) {
  var myChart = echarts.init(document.getElementById("gender"));

  var datas = [
    salaryData.map((item) => {
      return {
        name: item.label,
        value: item.b_count,
      };
    }),

    salaryData.map((item) => {
      return {
        name: item.label,
        value: item.g_count,
      };
    }),
  ];
  option = {
    title: [
      {
        text: "男女薪资分布",
        left: "2%",
        top: "2%",
        textStyle: {
          color: "#000",
          fontWeight: "700",
          fontSize: 18,
        },
      },
      {
        text: "男生",
        left: "45%",
        top: "45%",
        textStyle: {
          color: "#000",
          fontWeight: "700",
          fontSize: 12,
        },
      },
      {
        text: "女生",
        left: "45%",
        top: "92%",
        textStyle: {
          color: "#000",
          fontWeight: "700",
          fontSize: 12,
        },
      },
    ],
    series: datas.map(function (data, idx) {
      var top = idx * 50;
      return {
        type: "pie",
        radius: [40, 60],
        top: top + "%",
        height: "50%",
        left: "center",
        width: 400,
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1,
        },
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}",
          minMargin: 5,
          edgeDistance: 60,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: "#999",
            },
          },
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
        },
        data: data,
      };
    }),
    color: ["#5097ff", "#fda224", "#34d39a", "#3abcfa"],
  };

  option && myChart.setOption(option);
}

//每组薪资
function renderGroupData(groupData) {
  const arr = []
  for (const k in groupData) {
    arr.push(`<button type="button" class="btn btn-xs ">${k}</button>`)
  }
  document.querySelector("#btns").innerHTML = arr.join("")
  document.querySelector("#btns").children[0].classList.add("btn-blue")
  document.querySelector("#btns").addEventListener("click", function (e) {
    if (e.target.tagName === "BUTTON") {
      document.querySelector("#btns .btn-blue").classList.remove("btn-blue");
      e.target.classList.add("btn-blue");
      var myChart = echarts.init(document.getElementById("lines"));
      option = {
        xAxis: {
          type: "category",
          data: groupData[e.target.innerHTML].map((item) => {
            return item.name;
          }),
        },
        yAxis: {
          type: "value",
          splitLine:{
            lineStyle:{
              type:'dashed'
            }
          }
        },
        series: [
          {
            data: groupData[e.target.innerHTML].map((item) => {
              return item.hope_salary;
            }),
            type: "bar",
          },
          {
            data: groupData[e.target.innerHTML].map((item) => {
              return item.salary;
            }),
            type: "bar",
          },
        ],
      };
      option && myChart.setOption(option);
    }
  });
  var myChart = echarts.init(document.getElementById("lines"));
  option = {
    xAxis: {
      type: "category",
      data: groupData["1"].map((item) => {
        return item.name;
      }),
    },
    yAxis: {
      type: "value",
      splitLine:{
        lineStyle:{
          type:'dashed'
        }
      }
    },
    series: [
      {
        data: groupData["1"].map((item) => {
          return item.salary;
        }),
        type: "bar",
      },
      {
        data: groupData["1"].map((item) => {
          return item.hope_salary;
        }),
        type: "bar",
      },
    ],
    color:[
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: '#3cd49d' // 0% 处的颜色
        }, {
            offset: 1, color: '#cff5e7' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: '#50a3ee' // 0% 处的颜色
        }, {
            offset: 1, color: '#d7e9fa' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      }
    ]
  };
  option && myChart.setOption(option);
}
